import type { LoadingProps } from '@/components/loading/props'
import type { Question as QuestionType } from '@/types'
import { Button, View } from '@tarojs/components'
import { useState } from 'react'
import { AtCard } from 'taro-ui'
import { Loading, NavBar } from '@/components'
import { QuizLayout } from '@/components/quiz'
import './index.scss'

function DevQuiz() {
  const [showAnswer, setShowAnswer] = useState(false)

  const questions: QuestionType[] = [
    {
      id: '1',
      type: 'single',
      title: '以下哪个是JavaScript的基本数据类型？',
      options: [
        { id: '1', text: 'Object', value: '1' },
        { id: '2', text: 'String', value: '2' },
        { id: '3', text: 'Array', value: '3' },
        { id: '4', text: 'Function', value: '4' },
      ],
      correctAnswer: ['2'],
      difficulty: 'easy',
      category: 'JavaScript基础',
      tags: ['数据类型', '基础'],
      explanation: 'String是JavaScript的基本数据类型之一，而Object、Array、Function都是引用类型。',
    },
    {
      id: '2',
      type: 'multiple',
      title: '以下哪些是React Hooks？',
      options: [
        { id: '1', text: 'useState', value: '1' },
        { id: '2', text: 'useEffect', value: '2' },
        { id: '3', text: 'componentDidMount', value: '3' },
        { id: '4', text: 'useContext', value: '4' },
        { id: '5', text: 'render', value: '5' },
      ],
      correctAnswer: ['1', '2', '4'],
      difficulty: 'medium',
      category: 'React',
      tags: ['Hooks', 'React'],
      explanation: 'useState、useEffect、useContext都是React Hooks，而componentDidMount和render是类组件的方法。',
    },
  ]

  return (
    <>
      <View className="mb-4">
        <Button onClick={() => setShowAnswer(!showAnswer)}>
          {showAnswer ? '隐藏答案' : '显示答案'}
        </Button>
      </View>
      {questions.map((question, idx) => (
        <QuizLayout
          key={question.id}
          question={question}
          showAnswer={showAnswer}
          index={idx}
          total={questions.length}
          className="mb-6"
          actions={(
            <Button size="mini" type="primary">
              朗读
            </Button>
          )}
        />
      ))}
    </>
  )
}

export default function Dev() {
  const loadingTypes: LoadingProps['type'][] = ['bars', 'dots', 'pulse', 'spinner']

  const [isLoading, setIsLoading] = useState(false)

  function handleLoading() {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false)
    }, 2000)
  }

  return (
    <>
      {
        IS_WEAPP && <NavBar title="开发" leftType="none" fixed />
      }
      <View className="p-4">
        <View className="flex-col gap-4">

          <AtCard title="NavBar">
            <View className="flex-col">
              <NavBar title="仅占位" leftType="none" />
              <NavBar title="标题" border />
              <NavBar title="标题" border leftType="home" />
            </View>
          </AtCard>

          <AtCard title="Loading">
            <View className="flex-row gap-4">
              {
                loadingTypes.map(type => (
                  <Loading key={type} type={type} size="small" />
                ))
              }
            </View>
            <Button onClick={handleLoading} size="mini">全屏Loading</Button>

            <Loading visible={isLoading} fullscreen type="bars" />
          </AtCard>

          <AtCard title="Quiz">
            <DevQuiz />
          </AtCard>

        </View>

      </View>
    </>
  )
}
